/**
 * @name Slide
 * @author darcrand
 * @version 2019-06-22
 * @desc 滑动效果
 */

import React from "react"
import { CSSTransition, TransitionGroup } from "react-transition-group"

import { TRANSITION_DURATION } from "./index"

function Slide({ images, curr, direction }) {
    const groups = ["to-left", "to-right"]

    return groups.map(group => {
        const visible = (direction === "forward" && group === "to-left") || (direction === "backward" && group === "to-right")

        return (
            <div key={group} className="react-carousel_slide-wrap" style={{ visibility: visible ? "visible" : "hidden" }}>
                <TransitionGroup>
                    {images.map(
                        (img, index) =>
                            index === curr && (
                                <CSSTransition key={index} timeout={TRANSITION_DURATION} classNames={`react-carousel_slide-${group}`}>
                                    <div className="react-carousel_image-wrapper" style={{ backgroundImage: `url("${images[index]}")` }} />
                                </CSSTransition>
                            )
                    )}
                </TransitionGroup>
            </div>
        )
    })
}

export default Slide
